<template>
    <div class="one box">
        1、当前用户名：,当前时间：
        <el-row class="mb-4">
            <el-button style="height:2.3rem">调用后台接口</el-button>
            <el-button style="height:2.3rem" type="primary">主要按钮</el-button>
            <el-button style="height:2.3rem" type="success">成功按钮</el-button>
            <el-button style="height:2.3rem" type="info">信息按钮</el-button>
            <el-button style="height:2.3rem" type="warning">警告按钮</el-button>
            <el-button style="height:2.3rem" type="danger">危险按钮</el-button>
        </el-row>
    </div>
    <div class="two box">
        2、v-model：
        <input type="text" v-model="textFont">{{ textFont }}
    </div>
    <div class="three box">
        3、<el-button style="width:5rem;height:2rem" type="primary" @click="showState = !showState">v-show</el-button>
        <span v-show="showState">这里是v-show</span>
    </div>
    <div class="three box">
        4、<el-button style="width:5rem;height:2rem" type="warning" @click="ifState = !ifState">v-if</el-button>
        <span v-if="ifState">这里是v-if</span>
    </div>
    <div class="four box">
        5、v-for循环、class样式绑定、style绑定、click绑定
        <ul>
            <li v-for="item in cityList" @click="$message.success
            (item + '')">
                {{ item }}
            </li>
        </ul>
    </div>
    <div class="five box">
        6、子父组件传参props、$emit、$refs：<br>
        <span>
            这里是当前父组件index.vue的内容
            <el-button style="height:2rem;font-size: small;" type="primary" @click="message">通过$refs访问childPage.vue中的内容</el-button>
        </span>
        <Child :content="content" @fatherMethod="fatherMethod" ref="getChild">这里是父组件放的slot内容</Child>
    </div>
    <br>
</template>
<script setup>
import { ref,getCurrentInstance } from 'vue'
import Child from '../../components/Child.vue'
let textFont = ref('123456')
let showState = ref(true)
let ifState = ref(true)
let cityList = ref(['北京市', '天津市', '上海市', '重庆市'])
let content = ref('这里是父组件通过props传入的参数')
let getChild = ref(null)
const {appContext:{config:{globalProperties:{$message}}}} = getCurrentInstance();
let fatherMethod = () => {
    $message.success('子组件$emit调用父组件方法')
}
let message = () => {
    $message.success(getChild.value.text)
}
</script>
<style scoped lang='scss'>
.box {
    box-sizing: border-box;
    width: 100%;
    margin-left: 1rem;
    border-bottom: 1px solid #eee;
}

.one {
    height: 6rem;

    .mb-4 {
        margin-top: 1rem;
        flex-wrap: nowrap;
    }
}

.two {
    height: 4rem;
    line-height: 4rem;

    input {
        padding-left: 1rem;
        height: 2rem;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    input:focus {
        outline: 1px solid #409EFF;
        border: none
    }
}

.three {
    height: 4rem;
    line-height: 4rem;

    span {
        margin-left: 1rem;
    }
}

.four {
    padding-top: 1rem;
    height: 10rem;

    ul {
        margin-left: 2rem;
        margin-top: 1rem;

        li {
            cursor: pointer;
            line-height: 1.5rem;

            &:nth-child(2) {
                color: red;
            }

            &:nth-child(4) {
                color: rgb(4, 206, 4);
            }
        }
    }
}

.five {
    padding: 1rem 0;

    span {
        line-height: 4rem;
        color: green;
    }
}
</style>